<template>
  <div class="market-page-home">
    <div class="market-continer">
      <Skeleton v-show="!myMarket.length && !nodataStatus" showSkeleton="2" />
      <transition name="fade" v-if="showAgeMemberTips">
        <div class="ageMember-tips" @click="goUserEdit">
          <span class="text" v-show="ageMember.auditStatus===''">你尚未加入任何经纪公司，赶紧去加入吧~</span>
          <span class="text" v-show="ageMember.auditStatus===2">你加入经纪公司的申请已拒绝，请重新加入吧~</span>
          <span class="text" v-show="ageMember.auditStatus===3">你加入经纪公司的申请已失效，请重新加入吧~</span>
          <span class="close" @click.stop="closeTips">
            <i class="iconfont icon-chat_Shutdown"></i>
          </span>
        </div>
      </transition>
      <div class="search-box" @click="goSearch">
        <img src="../../assets/img/market/classify/search.png" class="search-icon" />搜索
        <!-- <van-search
          v-model.trim="searchValue"
          placeholder="请输入楼盘名称"
          disabled
          background="#fff"
          @click.native="goSearch"
        >
          <img src="../../assets/img/market/Group 3@2x.png" class="search-icon" slot="left-icon">
        </van-search>-->
      </div>
      <div class="market-classify" v-show="showClassify">
        <div class="market-classify-item" @click="goPage('/market/classify/allmarket')">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#icon-loupan_quanbuloupan" />
          </svg>
          <p>全部楼盘</p>
        </div>
        <div class="market-classify-item" @click="goPage('/market/classify/freemarket')">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#icon-loupan_mianfeiloupan" />
          </svg>
          <p>免费楼盘</p>
        </div>
        <div class="market-classify-item" @click="goPage('/market/classify/hotmarket')">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#icon-loupan_remenloupan" />
          </svg>
          <p>热门楼盘</p>
        </div>
        <div
          class="market-classify-item"
          @click="goPage('/market/classify/agentmarket')"
          v-show="ageMember.ifBrokerageMember"
        >
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#icon-loupan_gongsiloupan" />
          </svg>
          <p>公司楼盘</p>
        </div>
        <div class="market-classify-item" @click="goPage('/market/classify/mapmarket')">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#icon-loupan_ditukanfang" />
          </svg>
          <p>地图找房</p>
        </div>
      </div>
      <div class="my-markey">
        <div class="title" @click="goMyMarket" v-show="myMarket.length">
          <p class="name">
            我的楼盘
            <span class="total">({{ market.total }})</span>
          </p>
          <span class="more" v-show="userInfo.selfSupport">
            更多楼盘
            <i class="iconfont icon-jiantou"></i>
          </span>
        </div>
        <div class="market-list">
          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="finishedText"
            @load="onLoad"
          >
            <div
              class
              v-for="(item,index) in myMarket"
              :key="item.linkerId"
              @click="goMarketDetail(item)"
            >
              <div class="market-item" :class="{'active': item.recommand==10}">
                <div class="market-img">
                  <img
                    class="headimg"
                    :src="item.thumbHeadImgUrl || item.linkerUrl || palceholderImg"
                    alt
                  />
                  <img v-if="item.ifPanorama==1" class="icon" :src="panoramaIcon" alt />
                  <!-- <div v-if="item.cpActivityVo" class="coupon">卡券</div> -->
                </div>
                <div class="market-info">
                  <p class="market-name">
                    <span class="name">{{item.linkerName}}</span>
                    <span
                      v-if="item.subscribeInvalidTime > +new Date() || item.linkerType == 1"
                      class="iconShare"
                      @click.stop="goShare(item)"
                    >分享</span>
                    <span class="invalid" v-else>已过期</span>
                  </p>
                  <p class="market-location">{{item.city}} {{item.county}}</p>
                  <p class="market-tags">
                    <span
                      class="active"
                      :class="{'red': item.saleStatus==1,'default': item.saleStatus==3}"
                    >{{['在售', '待售', '', '售罄'][item.saleStatus] || '在售'}}</span>
                    <span v-for="(option, i) in item.linkerTags.slice(0,3)">{{option}}</span>
                  </p>
                  <p class="market-price" v-if="!item.price">
                    <span class="price">价格待定</span>
                    <span class="icon iconfont icon-more" v-show="!ageMember.panAgent" @click.stop="popupHandle(item,index)"></span>
                  </p>
                  <p class="market-price" v-else>
                    <span class="price">{{item.price}}{{item.priceUnit}}</span>
                    <span class="icon iconfont icon-more" v-show="!ageMember.panAgent" @click.stop="popupHandle(item,index)"></span>
                  </p>
                </div>
              </div>
            </div>
          </van-list>
        </div>
        <!-- v-show="!myMarket.length && nodataStatus" -->
        <div class="nodata" v-show="!myMarket.length && nodataStatus && !ageMember.panAgent && userInfo.selfSupport">
          <img src="../../assets/img/market/search/empty.png" alt />
          <p>你还没有开通任何楼盘</p>
          <button class="add-linker" @click="$router.push('/market/classify/allmarket')">去开通</button>
        </div>
      </div>
      <div>
        <van-popup
          v-model="showPopup"
          position="bottom"
          :close-on-click-overlay="true"
          overlay
          :class="{pastStyle:!pastShow}"
          @click-overlay="closeHandle"
        >
          <ul>
            <div v-if="!panAgent">
              <li class="color van-hairline--bottom" @click="stickHandle">
                <span v-show="currentItem.recommand==0">
                  <!-- <img src="../../assets/img/market/action/icon1.png" class="icon"> -->
                  置顶
                </span>
                <span v-show="currentItem.recommand==10">
                  <!-- <img src="../../assets/img/market/action/icon4.png" class="icon"> -->
                  取消置顶
                </span>
              </li>
              <!-- <li @click="exhibitionHandle">
                <span v-show="currentItem.displayFlag==0">关闭楼盘展示</span>
                <span v-show="currentItem.displayFlag!=0">开启楼盘展示</span>
              </li>-->
            </div>
            <!-- <li class="borderDottom" @click="goRenew(currentItem.linkerId)" v-show="!stride">
              <img src="../../assets/img/market/action/icon2.png" class="icon">续费
              <span
                class="invalidTime"
              >{{currentItem.subscribeInvalidTime | dateTimeFormatter(0)}}到期</span>
            </li>
            <li class="borderDottom" @click="goRenew(currentItem.linkerId)" v-show="stride">
              <img src="../../assets/img/market/action/icon2.png" class="icon">续费
              <span
                class="invalidTime"
              >{{currentItem.subscribeInvalidTime | dateTimeFormatter(2)}}到期</span>
            </li>-->
            <li
              class="channel van-hairline--bottom"
              @click="goChangeChannel"
              v-if="(+currentItem.isFree) && (currentItem.linkerType != 1) && !panAgent"
            >
              <!-- <img src="../../assets/img/market/action/icon3.png" class="icon"> -->
              切换渠道
            </li>
            <li
              class="remove van-hairline--bottom"
              @click="removeMarket"
              v-if="currentItem.linkerType != 1"
            >
              <!-- <img src="../../assets/img/market/action/icon3.png" class="icon"> -->
              删除
            </li>
            <li class="cancel" @click="closeHandle">取消</li>
          </ul>
        </van-popup>
      </div>
      <div class="channel-cnt">
        <van-actionsheet v-model="showChannel">
          <div class="channel-box">
            <div class="topbar">
              <p class="title">渠道选择</p>
              <p class="subtitle">七天只能切换一次</p>
            </div>
            <div class="channel-list">
              <p
                class="item"
                v-for="(item,index) in channelList"
                :key="index"
                @click="changeChannelFn(item)"
              >
                {{item.channelName}}
                <span v-if="item.freeFlag" class="free">免费券</span>
              </p>
            </div>
            <div class="cancle" @click="hideChannelFn">取消</div>
          </div>
        </van-actionsheet>
      </div>
    </div>
    <div class="market-guide-box" v-if="showGuide" @click="hideGuide">
      <div class="market-guide1">
        <img src="../../assets/img/market/classify/guide1.png" alt />
      </div>
      <div class="market-guide2">
        <img src="../../assets/img/market/classify/guide2.png" alt />
      </div>
      <div class="market-guide3">
        <img src="../../assets/img/market/classify/guide3.png" alt />
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import userService from 'SERVICE/userService'
import marketService from 'SERVICE/marketService'
import isEmpty from 'lodash/isEmpty'
import commonService from 'SERVICE/commonService'
import { setTimeout } from 'timers'
export default {
  data() {
    return {
      searchValue: '',
      market: {
        marketList: [],
        scrollTop: 0,
        size: 10,
        current: 1,
        pages: 1,
        total: ''
      },
      loading: false,
      finished: false,
      nodataStatus: false,
      finishedText: '没有更多了',
      panoramaIcon: require('IMG/marketDetail/Oval@2x.png'),
      palceholderImg: require('IMG/dynamics/palceholder-img.png'),
      showPopup: false,
      pastShow: '是否过期',
      stride: true,
      currentItem: {},
      currentIndex: '',
      stickNum: 0,
      showChannel: false,
      channelList: [],
      currentChannel: {},
      vipInfo: {},
      vipCity: {},
      ageMember: {
        ifBrokerageMember: false
      },
      showGuide: false,
      showAgeMemberTips: false,
      showClassify: false,
      panAgent: sessionStorage.getItem('panAgent') || false
    }
  },
  computed: {
    ...mapGetters(['userArea', 'userInfo']),
    myMarket: {
      get() {
        return this.market.marketList
      },
      set(newVal) {
        this.market.marketList = newVal
      }
    }
  },
  created() {
    if (this.$route.query.showGuide) {
      let hideGuide = window.sessionStorage.getItem('hideGuide')
      if (hideGuide) {
        this.showGuide = false
      } else {
        this.showGuide = true
      }
    }
    this.getIfBrokerageMember()
    this.checkChannel()
  },
  // mounted() {
  //   if (window.history && window.history.pushState) {
  //     history.pushState(null, null, document.URL)
  //     window.addEventListener('popstate', this.goBack, false)
  //   }
  // },
  methods: {
    // 隐藏引导页面
    hideGuide() {
      this.showGuide = false
      window.sessionStorage.setItem('hideGuide', false)
    },
    // 检测是否有楼盘解绑
    checkChannel() {
      userService
        .channelUnlinkRemind({})
        .then(res => {
          if (res.linkerName.length) {
            let linker = res.linkerName.join('、')
            this.$dialog
              .confirm({
                title: '解绑提醒',
                message: `你开通的${linker}等楼盘渠道已取消，请尽快重新绑定渠道！`,
                cancelButtonText: '下次提醒',
                confirmButtonText: '我知道了',
                className: 'cancle-channel',
                messageAlign: 'left',
                cancelButtonColor: '#9BA4B4'
              })
              .then(() => {
                this.updateChannelUnlinkRemind()
              })
              .catch(() => {})
          }
        })
        .catch()
    },
    // 标识下次不提醒取消渠道弹框
    updateChannelUnlinkRemind() {
      userService
        .updateChannelUnlinkRemind({})
        .then(res => {})
        .catch(err => {})
    },
    // 经纪人是否属于经纪公司
    getIfBrokerageMember() {
      marketService
        .getIfBrokerageMember({ agentId: this.userInfo.agentId, uuid: this.userInfo.uuid })
        .then(res => {
          this.ageMember = res
          if (res.panAgent) {
            sessionStorage.setItem('panAgent', res.panAgent)
          }
          sessionStorage.setItem('newUserPreset', res.newUserPreset)
          if (sessionStorage.getItem('userLoginType')) {
            this.showClassify = !res.panAgent
          } else {
            this.showClassify = !res.panAgent && this.userInfo.selfSupport
          }
          if (window.sessionStorage.getItem('showAgeMemberTips') || this.userInfo.belongType === 2) {
            this.showAgeMemberTips = false
          } else {
            this.showAgeMemberTips = res.auditStatus === 2 || res.auditStatus === 3 || res.auditStatus === ''
          }
          let data = Object.assign({}, this.userInfo, { ageMember: res.ifBrokerageMember })
          this.$store.dispatch('getUserInfo', data)
        })
        .catch(err => {})
    },
    // 点击楼盘分享数据上报
    shareMarketReport(item) {
      commonService.dataReport({
        code: 'DJFXLP',
        num: 1,
        agentId: this.userInfo.agentId,
        userActionType: 'DJFXLP',
        houseId: item.linkerId,
        houseName: item.linkerName,
        majorRegion: this.userInfo.majorRegion,
        location: this.userArea.city
      })
    },
    // 跳转绑定经纪公司
    goUserEdit() {
      this.$router.push('/user/edit')
    },
    // 关闭提示
    closeTips() {
      this.showAgeMemberTips = false
      window.sessionStorage.setItem('showAgeMemberTips', false)
    },
    // 删除楼盘
    removeMarket() {
      // 经纪公司楼盘无法删除
      if (this.currentItem.linkerType == 1) {
        return this.$toast('该楼盘为经纪公司楼盘，您无法删除！')
      }
      this.$dialog
        .confirm({
          title: '删除提示',
          messageAlign: 'left',
          message: `确定要删除楼盘【${this.currentItem.linkerName}】吗？`
          // message: `删除后，需要重新付费开通哦！确定要删除楼盘【${this.currentItem.linkerName}】吗？`
        })
        .then(() => {
          let linkerId = this.currentItem.linkerId
          let operationType = 50
          let status = 10
          marketService
            .changeMarketData(linkerId, operationType, status)
            .then(res => {
              this.$toast('楼盘删除成功')
              this.myMarket.splice(this.currentIndex, 1)
              this.market.total -= 1
            })
            .catch(() => {})
        })
        .catch(() => {})
      this.showPopup = false
    },
    // 点击搜索
    goSearch() {
      event.preventDefault()
      this.$router.push({ name: 'market-search', query: { city: '全国' } })
    },
    // 跳转分类
    goPage(url) {
      this.$router.push(url)
    },
    // 加载更多
    onLoad() {
      if (this.market.current > this.market.pages) {
        // 加载状态结束
        this.finished = true
        this.loading = false
        this.stickNumHandle()
      } else {
        this.getMyMarket()
      }
    },
    // 获取我的楼
    getMyMarket() {
      let parma = {
        name: '',
        size: this.size,
        current: this.market.current
      }
      userService
        .getMyMarket(parma)
        .then(res => {
          this.market.pages = res.pages
          this.market.total = res.total
          if (this.market.current === 1) {
            this.myMarket = res.records
          } else {
            this.myMarket.push(...res.records)
          }
          if (!this.myMarket.length) {
            this.finishedText = ''
          }
          this.nodataStatus = true
          this.loading = false
          this.market.current += 1
          // 返回回到原来的位置
          if (window.sessionStorage.getItem('marketPageScrollTop')) {
            let scrollTop = window.sessionStorage.getItem('marketPageScrollTop')
            this.$nextTick(() => {
              this.$el.querySelector('.market-continer').scrollTop = scrollTop
            })
            window.sessionStorage.removeItem('marketPageScrollTop')
          }
        })
        .catch(err => {})
    },
    // 跳转楼盘详情
    goMarketDetail(item) {
      if (item.shelfFlag == 1) {
        this.$dialog
          .alert({
            title: '非常抱歉',
            message: '该楼盘已被下架或删除',
            confirmButtonText: '知道啦'
          })
          .then(() => {
            // on close
          })
      } else {
        this.$router.push('/market/' + item.linkerId)
      }
    },
    // 分享
    async goShare(item) {
      let channelInfo = await marketService.getChannelName({ linkerId: item.linkerId })
      // 泛经纪人和新用户分享不需要选择渠道
      let oldUser = !(this.ageMember.panAgent || this.ageMember.newUserPreset)
      // if (isEmpty(this.userInfo.name) || isEmpty(this.userInfo.majorCity)) {
      //   this.$dialog
      //     .confirm({
      //       title: '您有未完善的信息',
      //       message: '信息不完整会影响传播效率哦',
      //       confirmButtonText: '去完善',
      //       className: 'marketShareHint'
      //     })
      //     .then(() => {
      //       this.$router.push({ name: 'user-edit' })
      //     })
      // } else
      if (item.shelfFlag == 1) {
        this.$dialog
          .alert({
            title: '非常抱歉',
            message: '该楼盘已被下架或删除',
            confirmButtonText: '知道啦'
          })
          .then(() => {
            // on close
          })
      } else if (+item.isFree && channelInfo.isChancel && item.agentType <= 0) {
        this.currentItem = item
        this.$dialog
          .confirm({
            title: '温馨提示',
            messageAlign: 'left',
            message: `您所绑定的渠道【${channelInfo.channelName}】已与该楼盘终止合作，当前已为您自动解绑渠道，若需正常使用楼盘请重新选择渠道。`,
            confirmButtonText: '选择渠道'
          })
          .then(() => {
            this.showChannelFn()
          })
          .catch(() => {})
      } else if (+item.isFree && item.agentType <= 0 && !item.channelId && item.linkerType != 1 && oldUser) {
        this.currentItem = item
        this.$dialog
          .confirm({
            title: '温馨提示',
            message: `您还没有绑定渠道，请先绑定渠道。`,
            confirmButtonText: '选择渠道'
          })
          .then(() => {
            this.showChannelFn()
          })
          .catch(() => {})
      } else {
        this.shareMarketReport(item) // 数据上报
        //去分享
        this.$router.push({ name: 'market-poster', params: { id: item.linkerId } })
      }
    },
    // 置顶
    popupHandle(item, index) {
      if (item.shelfFlag == 1) {
        this.$toast({
          message: '该楼盘已被下架或删除!',
          duration: 1000
        })
      } else {
        //更多
        this.currentItem = item
        this.currentIndex = index
        this.time(item)
        this.strideYear(item)
        this.showPopup = true
        this.$store.commit('TABBAR', { show: false })
      }
    },
    //比较时间错判断是否过期
    time(item) {
      let timestamp = new Date().getTime()
      if (timestamp - item.subscribeInvalidTime > 0) {
        this.pastShow = false
      } else {
        this.pastShow = true
      }
      // 经纪公司楼盘无过期时间
      if (item.linkerType == 1) {
        this.pastShow = true
      }
    },
    strideYear(item) {
      //判断是否跨年
      let timestamp = new Date().getTime()
      let usefulLife = item.subscribeInvalidTime - 0 //到期时间错
      if (new Date(usefulLife).getFullYear() - new Date(timestamp).getFullYear() > 0) {
        this.stride = true
      } else {
        this.stride = false
      }
    },
    goRenew(linkerId) {
      if (this.currentItem.saleStatus == 3) {
        this.$dialog
          .alert({
            title: '非常抱歉',
            message: '该楼盘已售罄，无法开通',
            confirmButtonText: '知道啦'
          })
          .then(() => {
            // on close
          })
      } else if (this.currentItem.shelfFlag == 1) {
        this.$dialog
          .alert({
            title: '非常抱歉',
            message: '该楼盘已被下架或删除',
            confirmButtonText: '知道啦'
          })
          .then(() => {
            // on close
          })
      } else if (+this.currentItem.isFree && this.currentItem.subscribeInvalidTime < +new Date()) {
        this.showChannelFn()
      }
      // else if (this.currentItem.thisDistributor === false) {
      //   this.$dialog
      //     .alert({
      //       title: '该楼盘不可续费',
      //       message: '非当前所属公司下楼盘无法开通续费',
      //       confirmButtonText: '知道啦'
      //     })
      //     .then(() => {
      //       // on close
      //     })
      // }
      else {
        //去续费
        this.$router.push({ name: 'marketDetail-open', params: { id: this.currentItem.linkerId } })
      }
    },
    stickNumHandle() {
      //判断有没有超过3个置顶
      for (let i = 0; i < this.myMarket.length; i++) {
        const element = this.myMarket[i]
        if (element.recommand == 10) {
          this.stickNum++
        }
      }
    },
    // 楼盘置顶
    stickHandle() {
      if (this.currentItem.recommand == 10) {
        this.recommandFalseHandle()
      } else {
        this.recommandTrueHandle()
      }
    },
    //-----置顶操作
    recommandTrueHandle() {
      this.stickNum++
      this.myMarket[this.currentIndex].recommand = '10'
      this.myMarket.unshift(this.myMarket[this.currentIndex])
      this.myMarket.splice(this.currentIndex + 1, 1)
      this.changeUserStatus(this.currentItem.linkerId, 40, 10) //改置顶状态
      this.$toast({ duration: 1000, message: '置顶成功' })
      this.closeHandle()
    },
    recommandFalseHandle() {
      this.stickNum--
      this.myMarket[this.currentIndex].recommand = '0'
      this.myMarket.push(this.myMarket[this.currentIndex])
      this.myMarket.splice(this.currentIndex, 1)
      this.changeUserStatus(this.currentItem.linkerId, 40, 0) //改置顶状态
      this.$toast({ duration: 1000, message: '取消置顶成功' })
      this.closeHandle()
    },
    exhibitionHandle() {
      //关闭楼盘展示
      this.$dialog
        .confirm({
          title: '是否确定关闭该楼盘名片展示',
          message: '关闭该楼盘展示将取消推荐和置顶状态'
        })
        .then(() => {
          this.closeHandle()
          this.changeUserStatus(this.currentItem.linkerId, 30, 1) //改为不展示
          this.myMarket.splice(this.currentIndex, 1)
          this.$toast({
            duration: 800,
            message: '关闭展示成功'
          })
        })
    },
    closeHandle() {
      this.showPopup = false
      this.$store.commit('TABBAR', { show: true })
    },
    async changeUserStatus(linkerId, operationType, status) {
      await userService.changeMarketData(linkerId, operationType, status)
    }, //修改楼盘状态
    goMyMarket() {
      this.$router.push('/market/classify/mymarket')
    },
    // 获取渠道列表
    getChannelListByLinkerId() {
      userService
        .getChannelListByLinkerId({ linkerId: this.currentItem.linkerId })
        .then(res => {
          this.channelList = res
          if (res.length) {
            this.showChannel = true
          } else {
            this.$toast('该楼盘没有渠道！')
          }
          this.showPopup = false
        })
        .catch()
    },
    // 选择渠道
    async changeChannelFn(item) {
      this.currentChannel = item
      this.hideChannelFn()
      if (item.freeFlag) {
        this.newOpenLinker()
      } else {
        this.$toast('该渠道无免费券，无法切换~')
      }
      // if (this.currentItem.subscribeInvalidTime > +new Date() && !this.currentItem.channelId) {
      //   this.newOpenLinker()
      //   return this.$toast('渠道绑定成功！')
      // }
      // // 判断vip城市和vip有效期
      // let vipInfo = await marketService.vipInfo()
      // this.vipInfo = vipInfo
      // let status = false
      // if (this.vipInfo.vipList) {
      //   this.vipInfo.vipList.forEach(el => {
      //     if (el.city === this.currentItem.city && el.vipValid) {
      //       status = true
      //     }
      //   })
      // }
      // if (item.freeFlag) {
      //   this.newOpenLinker()
      // } else if (status) {
      //   this.openHandler()
      // } else {
      //   this.$router.push({ name: 'marketDetail-open', params: { id: this.currentItem.linkerId, newChannelId: this.currentChannel.channelId } })
      // }
    },
    // 新商业模式开通楼盘
    newOpenLinker() {
      marketService
        .newOpenLinker({ linkerId: this.currentItem.linkerId })
        .then(async res => {
          if (!this.currentItem.channelId) {
            this.switchChannel()
          }
          let time =
            +new Date(this.currentItem.endTime.replace(/-/g, '/')) > +new Date(this.currentItem.invalidTime.replace(/-/g, '/'))
              ? +new Date(this.currentItem.endTime.replace(/-/g, '/'))
              : +new Date(this.currentItem.invalidTime.replace(/-/g, '/'))
          this.currentItem.subscribeInvalidTime = time
          this.$toast('楼盘开通成功！')
        })
        .catch(() => {})
    },
    // vip开盘
    async openHandler() {
      const res = await marketService.addHouseByVip(this.currentItem.linkerId)
      if (!this.currentItem.channelId) {
        this.switchChannel()
      }
      this.currentItem.subscribeInvalidTime = this.vipInfo.expireTimestamp
      this.$toast('楼盘开通成功！')
    },
    // 切换渠道
    switchChannel() {
      userService
        .switchChannel({
          linkerId: this.currentItem.linkerId,
          newChannelId: this.currentChannel.channelId,
          oldChannelId: '',
          switchingReason: ''
        })
        .then(res => {
          this.currentItem.channelId = this.currentChannel.channelId
        })
        .catch()
    },
    // 显示渠道
    showChannelFn() {
      this.getChannelListByLinkerId()
    },
    // 隐藏渠道
    hideChannelFn() {
      this.showChannel = false
    },
    goBack() {
      this.$router.replace({ path: '/dynamics' })
    },
    // 切换渠道
    goChangeChannel() {
      if (!this.currentItem.channelId) {
        // 跳转绑定渠道
        this.$router.push(`/market/change/channel?linkerId=${this.currentItem.linkerId}&openStatus=${this.currentItem.openStatus}`)
      } else {
        // 跳转切换渠道
        this.$router.push({
          path: '/change/channel',
          query: { linkerId: this.currentItem.linkerId, channelId: this.currentItem.channelId, channelName: this.currentItem.channelName, switchable: this.currentItem.switchable }
        })
      }
    }
  },
  beforeRouteLeave(to, from, next) {
    // if (to.meta.tabbar && to.meta.tabbar.show) {
    // } else {
    //   this.market.scrollTop = this.$el.querySelector('.market-continer').scrollTop
    //   sessionStorage.setItem('market', JSON.stringify(this.market))
    // }
    // next()
    let scrollTop = this.$el.querySelector('.market-continer').scrollTop
    window.sessionStorage.setItem('marketPageScrollTop', scrollTop)
    next()
  }
  // destroyed() {
  //   window.removeEventListener('popstate', this.goBack, false)
  // }
}
</script>
<style lang="less" scoped>
.market-page-home {
  display: flex;
  flex-direction: column;
  position: relative;
  .search-box {
    height: 36px;
    margin: 10px 8px;
    background: rgba(242, 246, 247, 1);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #9ca5b5;
    img {
      width: 24px;
      height: 24px;
      margin-top: -2px;
    }
  }
  .market-continer {
    height: 100%;
    overflow-y: scroll;
  }
  .ageMember-tips {
    height: 28px;
    background: rgba(230, 94, 46, 0.15);
    font-size: 12px;
    font-weight: 400;
    color: rgba(230, 94, 46, 1);
    display: flex;
    align-items: center;
    .text {
      flex: 1;
      padding-left: 8px;
    }
    .close {
      width: 50px;
      text-align: right;
      padding-right: 8px;
      i {
        font-size: 18px;
      }
    }
  }
  .market-classify {
    height: 100px;
    padding-top: 17px;
    font-size: 10px;
    display: flex;
    border-bottom: 8px solid #f2f6f7;
    .market-classify-item {
      flex: 1;
      text-align: center;
      .svg-icon {
        width: 32px;
        height: 32px;
      }
      img {
        width: 32px;
        height: 32px;
      }
      p {
        color: #445166;
        height: 12px;
        line-height: 12px;
        margin-top: 4px;
        font-weight: 600;
        font-size: 12px;
      }
    }
  }
  .my-markey {
    flex: 1;
    .title {
      padding: 15px 16px 10px;
      color: #0d1b33;
      display: flex;
      align-items: center;
      .name {
        font-size: 20px;
        font-weight: 600;
        flex: 1;
      }
      .total {
        font-size: 14px;
        font-weight: 400;
        color: rgba(156, 165, 181, 1);
      }
      .more {
        float: right;
        font-weight: 400;
        font-size: 12px;
        color: #9ca5b5;
        display: flex;
        align-items: center;
        i {
          opacity: 0.5;
        }
      }
    }
    .nodata {
      text-align: center;
      margin-top: 88px;
      img {
        height: 88px;
        width: 88px;
        margin: 0 auto;
      }
      p {
        font-size: 12px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 17px;
      }
      .add-linker {
        margin-top: 16px;
        width: 64px;
        height: 32px;
        border-radius: 16px;
        line-height: 32px;
        border: 1px solid rgba(0, 122, 230, 1);
        font-size: 12px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(0, 122, 230, 1);
        line-height: 17px;
        text-align: center;
        background: #fff;
      }
    }
  }
  .market-item {
    display: flex;
    font-size: 14px;
    padding: 16px;
    box-shadow: inset 0px -1px 1px -1px #ddd;
    &.active {
      background-color: #f6f6f6;
    }
    .market-img {
      width: 120px;
      height: 90px;
      border-radius: 6px;
      overflow: hidden;
      margin: 0 12px 0 0;
      position: relative;
      .headimg {
        width: 100%;
        height: 100%;
        border-radius: 6px;
        object-fit: cover;
      }
      .coupon {
        position: absolute;
        left: 0;
        top: 8px;
        font-size: 12px;
        color: #fff;
        padding: 0 10px 0 5px;
        height: 20px;
        line-height: 20px;
        background-color: #cf562b;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
      }
      .icon {
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        width: 32px;
        height: 32px;
        object-fit: cover;
      }
    }
    .market-info {
      flex: 1;
      p {
        margin-bottom: 8px;
      }
      .market-name {
        display: flex;
        font-size: 18px;
        height: 28px;
        font-weight: 600;
        color: rgba(19, 41, 79, 1);
        margin-bottom: 0;
        justify-content: space-around;
        .name {
          flex: 1;
          // line-height: 30px;
          width: 150px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .iconShare {
          width: 54px;
          height: 30px;
          // line-height: 30px;
          padding: 8px 0;
          background: linear-gradient(90deg, rgba(255, 153, 51, 1) 0%, rgba(230, 94, 46, 1) 100%);
          box-shadow: 0px 2px 4px 0px rgba(230, 94, 46, 0.35);
          border-radius: 15px;
          font-size: 12px;
          color: #fff;
          text-align: center;
          font-weight: 500;
          margin-left: 10px;
          margin-top: -2px;
        }
        .invalid {
          font-size: 10px;
          border-radius: 2px;
          border: 1px solid rgba(244, 127, 49, 1);
          color: #f47f31;
          font-weight: 400;
          height: 16px;
          padding: 2px 4px;
        }
      }
      .market-location {
        font-size: 12px;
        font-weight: 400;
        color: #9ca5b5;
        padding: 2px 0;
      }
      .market-tags {
        font-size: 10px;
        display: flex;
        align-items: center;
        line-height: normal;
        span {
          line-height: 16px;
          padding: 1px 4px 0;
          border-radius: 2px;
          margin-right: 5px;
          background: rgba(156, 165, 181, 0.15);
          color: #40516f;
          &.active {
            background: rgba(0, 122, 230, 0.15);
            color: #007ae6;
          }
          &.red {
            background: rgba(230, 94, 46, 0.15);
            color: #e65e2e;
          }
          &.default {
            background: rgba(143, 159, 177, 0.15);
          }
          &:nth-child(4) {
            margin-right: 0;
          }
        }
      }
      .market-price {
        font-size: 12px;
        font-weight: 600;
        color: rgba(68, 81, 102, 1);
        display: flex;
        margin-bottom: 0;
        padding-top: 4px;
        .price {
          flex: 1;
        }
        .icon-more {
          width: 50px;
          text-align: center;
          color: #9e9e9e;
        }
      }
    }
  }
  .pastStyle {
    height: auto;
  }
  .van-modal {
    width: 100%;
  }
  //弹窗
  .van-popup--bottom {
    background: rgba(255, 255, 255, 1);
    width: 100%;
    // height: 250px;
    border-radius: 0;
    ul {
      li {
        height: 60px;
        line-height: 60px;
        text-align: center;
        font-size: 16px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        // margin: 0 16px;
        vertical-align: middle;
        .icon {
          width: 24px;
          height: 24px;
          margin-right: 12px;
          vertical-align: middle;
        }
      }
      .borderDottom {
        border-bottom: 1px solid #eeeeee;
      }
      // .color {
      // color: rgba(234, 77, 46, 1);
      // border-bottom: 1px solid #eeeeee;
      // }
      .cancel {
        height: 56px;
        line-height: 56px;
        text-align: center;
        background: rgba(247, 249, 250, 1);
        font-size: 16px;
        color: #9ca5b5;
      }
      .invalidTime {
        height: 16px;
        font-size: 12px;
        font-weight: 400;
        color: rgba(156, 165, 181, 1);
        line-height: 16px;
        margin-left: 12px;
      }
      .remove {
        color: #ea4d2e;
      }
    }
  }
  .channel-box {
    font-size: 16px;
    padding: 10px 0 0 0;
    background-color: #fff;
    .topbar {
      text-align: center;
      padding-bottom: 5px;
      .title {
        padding: 10px 0 5px;
        font-size: 18px;
        color: #13294f;
        font-weight: 600;
      }
      .subtitle {
        font-size: 12px;
        color: #999;
        z-index: 9;
        position: relative;
      }
    }

    .channel-list {
      max-height: 300px;
      overflow-y: scroll;
    }
    .item {
      padding: 16px 0 10px 16px;
      .free {
        display: inline-block;
        font-size: 10px;
        color: #fff;
        background-color: #ea4d2e;
        line-height: 15px;
        height: 15px;
        padding: 0 5px;
        border-radius: 2px;
        vertical-align: middle;
      }
    }
    .cancle {
      margin-top: 20px;
      height: 50px;
      background: rgba(238, 238, 238, 1);
      line-height: 50px;
      text-align: center;
    }
  }
  .market-guide-box {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    left: 0;
    top: 0;
    .market-guide1 {
      position: absolute;
      left: 13px;
      top: 50px;
      img {
        width: 286px;
        height: 87px;
      }
    }
    .market-guide2 {
      position: absolute;
      left: 5px;
      top: 165px;
      img {
        width: 263px;
        height: 183px;
      }
    }
    .market-guide3 {
      position: absolute;
      left: 130px;
      top: 440px;
      img {
        width: 117px;
        height: 37px;
      }
    }
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.5s ease;
  }

  .fade-enter,
  .fade-leave-to {
    opacity: 0;
    transform: translatey(-30px);
  }
}
</style>
